<template>
  <el-row>
    <el-popover v-model="moveVisible" placement="top" width="320">
      <div>请选择要交换的分类</div>
      <el-table :show-header="false" :data="noDeleteMap" style="width: 100%;">
        <el-table-column prop="number">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column prop="number" width="50">
          <template slot-scope="scope">
            <el-button
              type="text"
              class="class--change"
              size="small"
              :disabled="index === scope.$index"
              @click="moveMap(index, scope.$index)"
            >
              交换
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin: 0;">
        <el-button size="mini" type="text" @click="moveVisible = false">
          取消
        </el-button>
      </div>
      <el-button slot="reference" type="text">
        移动
      </el-button>
    </el-popover>
    <el-popover v-model="mapDeleteVisible" placement="top" width="160">
      <p>确定删除该分类吗？</p>
      <div style="text-align: right; margin: 0;">
        <el-button size="mini" type="text" @click="mapDeleteVisible = false">
          取消
        </el-button>
        <el-button
          type="text"
          size="mini"
          class="class--delete"
          @click="deleteMap"
        >
          确定
        </el-button>
      </div>
      <el-button slot="reference" type="text" class="class--delete">
        删除
      </el-button>
    </el-popover>
  </el-row>
</template>

<script>
export default {
  props: {
    index: {
      type: Number,
      default: 0
    },
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    allMap: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      moveVisible: false,
      mapDeleteVisible: false
    }
  },
  computed: {
    noDeleteMap() {
      return this.allMap.filter((item) => {
        return !item.delete
      })
    }
  },
  methods: {
    deleteMap() {
      this.$emit('deleteMap', this.index)
      this.mapDeleteVisible = false
    },
    moveMap(index1, index2) {
      this.$emit('moveMap', index1, index2)
      this.moveVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-button {
  padding: 0;
}
.class--delete {
  color: #999;
}
</style>
